import { MenuOutlined } from "@ant-design/icons";
import { ProFormDependency, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProForm } from "@ant-design/pro-components";
import { FileGroup, SpecificationValueType } from "common/utils/data";
import React from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from '@dnd-kit/utilities';
import FileUpload from "@/components/FileUpload";
import { Form } from "antd";

export default function ImpulseResponseFileItem({
  uuid,
  dataGroups,
                                          }: {
  uuid: string,
  dataGroups?: string[];
}){
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({
    id: uuid,
  });

  return <div ref={setNodeRef} style={{
    transform: CSS.Transform.toString(transform),
    transition,
  }} >
    <ProFormGroup>
      <MenuOutlined
        className="cursor-move ml-[4px]"
        style={{transform: 'translateY(8px)', fontSize: 16}}
        {...attributes}
        {...listeners}
      />
      <ProFormSelect
        rules={[{required: true,message: '请选择'}]}
        fieldProps={{
          showSearch: true,
          optionFilterProp: 'label',
        }}
        width={200}
        placeholder="分组"
        options={dataGroups?.map(item=>{
          return {
            label: item,
            value: item,
          }
        })}
        name="group"
      />
      <ProForm.Item name="urls">
        <FileUpload fileGroup={FileGroup.EVALUATION_IMPULSE_RESPONSE} ext={['.wav']} />
      </ProForm.Item>
  </ProFormGroup>
  </div>
}
